<template>
  <div id="fe-to-top" @click="toTop" :style="{
    height: height,
    width: width,
    'border-radius': borderRadius,
    bottom: bottom,
    right: right
  }">
    <slot>
      <div class="fe-to-top-content">
        <svg v-if="direction === 'top'" width="25px" height="20px" t="1635149116473" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2399">
          <path fill="#fff"
            d="M966.4 668.8l-435.2-432c-9.6-9.6-25.6-9.6-35.2 0l-441.6 432c-9.6 9.6-9.6 25.6 0 35.2 9.6 9.6 25.6 9.6 35.2 0l425.6-416 416 416c9.6 9.6 25.6 9.6 35.2 0S976 678.4 966.4 668.8z"
            p-id="2400"></path>
        </svg>
        <svg v-if="direction === 'bottom'" width="25px" height="20px" t="1635149261805" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2532">
          <path fill="#fff"
            d="M966.4 323.2c-9.6-9.6-25.6-9.6-35.2 0l-416 416-425.6-416c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l441.6 432c9.6 9.6 25.6 9.6 35.2 0l435.2-432C976 345.6 976 332.8 966.4 323.2z"
            p-id="2533"></path>
        </svg>
      </div>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'to-top',
  data() {
    return {}
  },
  components: {
    // solidArrow: require('../HollowArrow/hollow-arrow.vue').default
  },
  props: {
    direction: {
      type: String,
      default: 'top'
    },
    position: {
      type: Number,
      default: 0
    },
    scrollTop: {
      type: Number,
      default: 10
    },
    bottom: {
      type: String,
      default: '30px'
    },
    right: {
      type: String,
      default: '30px'
    },
    height: {
      type: String,
      default: '40px'
    },
    width: {
      type: String,
      default: '40px'
    },
    borderRadius: {
      type: String,
      default: '6px'
    }
  },
  methods: {
    toTop() {
      this.$emit('onClick')
      window.scroll(0, this.position)
    }
  },
  mounted() {
    let toTopBtn = document.getElementById('fe-to-top')
    window.addEventListener('scroll', e => {
      let scrollTop =
        document.documentElement.scrollTop ||
        window.pageYOffset ||
        document.body.scrollTop
      if (scrollTop > this.scrollTop) {
        toTopBtn.style.display = 'block'
      } else {
        toTopBtn.style.display = 'none'
      }
    })
  }
}
</script>

<style lang="less" scoped>
@import '~$common/funs.less';
#fe-to-top {
  display: none;
  position: fixed;
  z-index: 99;
  .fe-to-top-content {
    width: 100%;
    height: 100%;
    .-flex-layout();
    outline: 1px solid #fff;
    color: #fff;
    border-radius: 50%;
  }
}
</style>